<template>
	<uni-popup ref="classifyPopup" type="center" is-mask-click="false">
		<view class="popup-container">
			<view class="popup-header">
				<text class="popup-title">添加分类</text>
				<uni-icons type="closeempty" size="20" color="#999" class="close-icon" @click="popup.value.close()">
				</uni-icons>
			</view>

			<view class="popup-content">
				<uni-forms :modelValue="formData" label-width="80px">
					<uni-forms-item label="分类名称" name="name" required>
						<uni-easyinput type="text" v-model="formData.name" placeholder="请输入分类名称" focus />
					</uni-forms-item>
					<uni-forms-item label="排序" name="sort">
						<uni-number-box v-model="formData.sort" :min="0" :max="100"></uni-number-box>
					</uni-forms-item>
					<uni-forms-item label="是否推荐" name="recommend">
						<switch style="transform:scale(0.7)" v-model="formData.recommend" color="#007AFF" />
					</uni-forms-item>
					<uni-forms-item label="是否启用" name="enabled">
						<switch style="transform:scale(0.7)" v-model="formData.enabled" color="#007AFF" />
					</uni-forms-item>
				</uni-forms>
			</view>

			<view class="popup-footer">
				<button @click="" type="default" size="mini" class="close">取消</button>
				<button type="primary" size="mini" class="submit-btn" @click="">提交</button>
			</view>
		</view>
	</uni-popup>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	const classifyPopup  = ref(null)
	const formData = ref({
		name: "",
		sort: 0,
		select: false,
		enable: false
	})
	const open = () => {
		classifyPopup.value.open();
	}
	
	const close = () => {
	  classifyPopupRef.value.close();
	};
	
	defineExpose({
		open,
		close
	})
</script>

<style lang="scss" scoped>
	.popup-container {
		width: 90vw;
		max-width: 600px;
		background-color: #fff;
		border-radius: 16rpx;
		overflow: hidden;
		box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.1);

		.popup-header {
			position: relative;
			padding: 24rpx 32rpx;
			background-color: #f5f7fa;
			border-bottom: 1px solid #eee;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.popup-title {
				font-size: 32rpx;
				font-weight: 600;
				color: #333;
			}

			.close-icon {
				padding: 8rpx;
				cursor: pointer;
			}
		}

		.popup-content {
			padding: 32rpx;

			:deep(.uni-forms-item) {
				margin-bottom: 24rpx;
			}

			:deep(.uni-forms-item__label) {
				color: #666;
				font-size: 28rpx;
			}

			:deep(.uni-easyinput__content) {
				border-radius: 8rpx;
			}

			:deep(.uni-number-box) {
				margin-left: -8rpx;
			}
		}

		.popup-footer {
			padding: 24rpx 32rpx;
			background-color: #f5f7fa;
			border-top: 1px solid #eee;
			display: flex;
			justify-content: flex-end;
			gap: 20rpx;

			button {
				min-width: 120rpx;
				border-radius: 8rpx;
				font-size: 28rpx;
				padding: 0 32rpx;
				height: 64rpx;
				line-height: 64rpx;
			}

			.cancel-btn {
				background-color: #fff;
				color: #666;
				border: 1px solid #ddd;
			}

			.submit-btn {
				background-color: #007AFF;
				color: #fff;
				border: none;
			}
		}
	}
</style>